
<template>
  <n-data-table
      :data="dataRows"
      :row-key="(row)=>row.id"
      :indent="10"
      :loading="loading"
      :pagination="type === 'page' ? pagination : false"
      :single-line="false"
      remote
      :columns="tableColumns"
      @update:page="onPageChange"
      @update:page-size="onPageSizeChange"
      :scroll-x="scrollX"
  />
</template>

<script setup lang="js">

import {onMounted, reactive, ref} from "vue";
import {getOption, getSelection} from "@/plugins/table";
import useSystemStore from "@/stores/admin/useSystemStore";
import useSettingsStore from "@/stores/admin/useSettingStore";
import {storeToRefs} from "pinia";

const {clientWidth} = storeToRefs(useSystemStore())
const {collapsed} = storeToRefs(useSettingsStore())

const props = defineProps({
  type:{
    type: String,
    default: 'tree'
  },
  bodyWidth:Number,
  columns:{
    type:Array
  },
  multiple:Boolean,
  disabledSelect:Function,
  disabledDelete:Function,
  option:Boolean,
  optionTypes: {
    type:Array,default: ['update','delete']
  },
  updateClick:Function,deleteClick:Function,showClick:Function
});
const emit = defineEmits({
  getData:null
})
const scrollX = computed(()=>{
  let wi = clientWidth.value - 44 - 43;
  if (props.bodyWidth){
    wi = props.bodyWidth - 44 - 43;
  }
  if (collapsed.value){
    wi -= 64;
  }else {
    wi -= 240;
  }
  let colWi = 0
  props.columns?.forEach(col=>{
    colWi += col.width ? col.width > 100 ? col.width : 100 : 200
  })
  if (props.option){
    colWi += 200;
  }
  return wi < colWi ? colWi:wi;
})
const dataRows = ref()
const loading = ref(true)
const pagination = reactive({
  page: 1,
  pageSize: 10,
  pageSizes: [10, 30, 50, 100],
  itemCount: 0,
  size: "small",
  showQuickJumper: true,
  showSizePicker: true,
  pageCount:1,
  prefix(info) {
    return `总共 ${info.itemCount} 条`
  }
})

const tableColumns = computed(()=>{
  let column = [];
  if (props.multiple){
    // 可多选
    column.push(getSelection(props.disabledSelect))
  }
  for (let col of props.columns) {
    column.push({
      width:200,
      ellipsis:{
        tooltip:true
      },
      resizable:true,
      minWidth:100,
      // ellipsisComponent:'performant-ellipsis',
      ...col
    })
  }
  if (props.option){
    // 有操作列
    column.push(getOption(props.optionTypes,
        {updateClick:props.updateClick,deleteClick:props.deleteClick,showClick:props.showClick},
        {disabledDelete:props.disabledDelete},
    ))
  }
  return column;
})
function setRowData(data){
  if (props.type === 'page'){
    dataRows.value = data?.records || []
    pagination.itemCount = data?.total || 0
    pagination.pageCount = data?.pages || 0
  }else {
    dataRows.value = data || []
  }
  loading.value = false
}
/**
 * 获取表格数据
 */
const getList = ()=>{
  if (props.type === 'page'){
    emit('getData',setRowData,pagination.page,pagination.pageSize)
  }else {
    emit('getData',setRowData)
  }
}
const onPageChange = (page) => {
  pagination.page = page
  getList()
}
const onPageSizeChange = (pageSize) => {
  pagination.pageSize = pageSize
  getList()
}
defineExpose({
  getList,
})
onMounted(()=>{
  getList();
})
</script>